<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动手实验</title>
    <link rel="stylesheet" href="../../css/L3/labor.css" />
    <script src="../../node_modules/recordrtc/RecordRTC.js"></script>
    <script
      src="../../plugins/jquery-3.6.0.min.js"
      type="text/javascript"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="../../plugins/zrender.min.js"></script>
    <script src="../../plugins/pixi.js"></script>
    <script src="../../plugins/bump.js"></script>
    <script src="../../plugins/tink.js"></script>
    <script type="module" src="../../js/L3/labor.js"></script>
  </head>
  <body>
    <div class="main" id="main">
      <!-- 这里是返回条的div -->
      <div id="backbar">
        <div id="backbutton">&lt</div>
        <!-- <div id="backtitle">动手实验</div> -->
        <div id="playicon"></div>
      </div>
      <!-- 在这里设置一个实验完成的遮罩 -->
      <div class="shadowPanel">
        <div class="controlbox">
          <div class="replay">
            <img src="../../images/再玩一遍.png" alt="再看一遍" />
            <p>再玩一遍</p>
          </div>
          <div class="nextItem">
            <img src="../../images/下一环节.png" alt="下一环节" />
            <p>下一环节</p>
          </div>
        </div>
      </div>
      <!-- 语音录音的部分 -->
      <div id="record" style="display: none">
        <div id="buttongroup">
          <!-- 左侧的播放按钮 -->
          <div
            class="playbutton"
            :class="{'canNotPlay':canNotPlay,'canPlay':canPlay,'playing':playing}"
            @click="handlePlayBtnClick($event)"
          ></div>
          <!-- 中间的录音按钮 -->
          <div
            class="recordbutton"
            @click="handleRecordBtnClick($event)"
            :class="{'beforeRecord':beforeRecord,'recording':recording,'stopRecord':stopRecord}"
          ></div>
          <!-- 右侧的完成按钮 -->
          <div
            class="confirmbutton"
            :class="canConfirm ? 'confirmAble' : 'confirmDisable'"
            @click="handleConfirmBtnClick($event)"
          ></div>
        </div>
        <div id="topwave">
          <div id="soundwave" :class="{'displayNone':unshowWave }">
            <div class="triangle"></div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script type="module">
    var app = new Vue({
      el: '#record',
      data: {
        // 左侧的播放按钮是不是可以使用了
        canNotPlay: true,
        // 左侧的按钮是不是正在播放的嗯状态
        canPlay: false,
        // 左侧按钮状态是不是暂停
        playing: false,
        // 是不是在录音开始之前
        beforeRecord: true,
        // 是否在录音中
        recording: false,
        // 录音是不是停止了
        stopRecord: false,
        //  右边的确认按钮是不是可以使用了
        canConfirm: false,
        // 声波的计时器
        waveInterval: '',
        // 控制声音波浪的显示
        unshowWave: true,
        mediaConstraints: { video: false, audio: true },
      },
      created: function () {
        console.log('这里打印一个￥', $)

        navigator.mediaDevices
          .getUserMedia(this.mediaConstraints)
          .then(this.successCallback)
          .catch(this.errorCallback)
      },
      methods: {
        successCallback(stream) {
          var recordRTC = RecordRTC(stream, { type: 'audio' })
          recordRTC.startRecording()
          setTimeout(() => {
            recordRTC.stopRecording(function (audioURL) {
              // audioURL为生成音频的URL地址，通过window.open(audioURL)可以实时预览
              window.open(audioURL)
              var recordedBlob = recordRTC.getBlob()
              // 转换为base64
              let recordBase64 = recordRTC.getDataURL(function (dataURL) {})

              let downloadLink = document.createElement('a')
              downloadLink.href = URL.createObjectURL(recordedBlob)
              downloadLink.download = '录屏.mp3'
              downloadLink.click()
            })
          }, 10000)
        },
        errorCallback(error) {},

        // 确认按钮的点击处理函数
        handleConfirmBtnClick(e) {
          // TODO:调用接口保存录音 并展示一个新的播放组件
        },
        // 播放按钮的点击处理函数1
        handlePlayBtnClick(e) {
          let class_name = e.target.className.split(' ')[1]
          if (class_name === 'canPlay') {
            // TODO:点击以后开始播放录音
            this.canPlay = false
            this.playing = true
            this.setWaveAnimation()
          } else if (class_name === 'playing') {
            // TODO:暂停语音的播放
            this.playing = false
            this.canPlay = true
            clearInterval(this.waveInterval)
          } else {
          }
        },
        // 语音按钮的点击处理函数
        handleRecordBtnClick(e) {
          let class_name = e.target.className.split(' ')[1]
          if (class_name == 'beforeRecord') {
            this.beforeRecord = false
            this.recording = true
            this.unshowWave = false
            this.setWaveAnimation()
            // startRecording()
          } else if (class_name == 'recording') {
            // 对左侧的按钮的一些操作
            this.canNotPlay = false
            this.canPlay = true
            // 对自己的一些操作
            this.stopRecord = true
            this.recording = false
            //
            this.canConfirm = true
            clearInterval(this.waveInterval)
          } else if (class_name == 'stopRecord') {
            this.beforeRecord = true
            this.stopRecord = false
            //
            this.canConfirm = false
            this.canNotPlay = true
            this.canPlay = false
          }
        },
        // 声浪动画函数
        setWaveAnimation() {
          this.waveInterval = setInterval(() => {
            let positionYStr = $('#soundwave').css('background-position-y')
            let positionXNum = parseInt(
              positionYStr.substr(0, positionYStr.length - 1)
            )
            $('#soundwave').css(
              'background-position-y',
              positionXNum + 1.58 + 'rem'
            )
          }, 200)
        },
      },
    })
  </script>
</html>
